<template>
    <div class='SOPTemplate' v-loading="loading">
        <div class="formArea">
            <el-form :model="createForm" :rules="rules" ref="createForm" label-width="120px" size="mini">
                <el-form-item label="工序编号">
                    <el-input v-model="createForm.processCode" :disabled='disatruebled'></el-input>
                </el-form-item>
                <el-form-item label="工序名称">
                    <el-input v-model="createForm.processName" :disabled='disatruebled'></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="state">
                    <el-radio v-model="createForm.state" label="0">启用</el-radio>
                    <el-radio v-model="createForm.state" label="1">停用</el-radio>
                </el-form-item>
                <el-form-item label="开始分区" prop="beginZone">
                    <el-input v-model="createForm.beginZone" :maxlength="120"></el-input>
                </el-form-item>
                <div id='partition'>
                    <el-form-item label="分区" v-for='(item, i) in createForm.vos' :key='i' :data-id='i'>
                        <div class='partition'>
                            <el-form-item label="名称" :prop="'name_'+i">
                                <el-input v-model="createForm['name_'+i]" :maxlength="120"></el-input>
                            </el-form-item>
                            <el-form-item label=" " v-for='(t, j) in item.down' :key='j'>
                                <div style='position: relative'>
                                    <el-select v-model="t.name" placeholder="请选择" filterable>
                                        <el-option
                                            v-for="k in options"
                                            :key="k.value"
                                            :label="k.label"
                                            :value="k.value"
                                            :disabled="k.disabled">
                                        </el-option>
                                    </el-select>
                                    <el-button icon='el-icon-remove-outline' class='del' @click='delLine(i, j)'></el-button>
                                </div>
                            </el-form-item>
                            <el-form-item label=" " class='addName'>
                                <div @click='addLine(item, i)'>
                                    <el-button icon='el-icon-circle-plus-outline'></el-button>添加一行
                                </div>
                            </el-form-item>
                            <el-button icon='el-icon-remove-outline' class='del' @click='delPartition(i)'></el-button>
                        </div>
                        <div class="partitionHandle">
                            <el-tooltip class="item" effect="dark" content="拖拽" placement="top">
                                <span class="iconfont icon-row"></span>
                            </el-tooltip>
                            <span class="sort">
                                <span class="el-icon-caret-top" @click="sortHandle(i, 'up')"></span>
                                <span class="el-icon-caret-bottom" @click="sortHandle(i, 'down')"></span>
                            </span>
                        </div>
                    </el-form-item>
                </div>
                <el-form-item label=' '>
                    <div class='addPartition' @click='addPartition'>
                        <el-button icon='el-icon-circle-plus-outline'></el-button>
                        添加分区
                    </div>
                </el-form-item>
                <el-form-item label="结束分区" endZone="jsfq">
                    <el-input v-model="createForm.endZone" :maxlength="120"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn">
            <el-button type="primary" plain size="small" @click="$router.push('/basicData/procedure')">取消
            </el-button>
            <el-button type="primary" size="small" @click="save">保存</el-button>
        </div>
    </div>
</template>

<script>
import {
    sopDetail,
    sopEdit
} from '@/api/baseController'
import {
    zoneOption
} from '@/api/baseController'
import Sortable from "sortablejs"
export default {
    data() {
        return {
            createForm: {
                processCode: '',
                processName: '',
                state: '',
                beginZone: '开始生产任务',
                endZone: '结束生产任务',
                vos: []
            },
            // 表单校验规则
            rules: {
                state: [{
                    required: true
                }],
                beginZone: [{
                    message: '开始分区不能为空',
                    required: true,
                }],
                endZone: [{
                    message: '结束分区不能为空',
                    required: true,
                }],
            },
            disatruebled: true,
            options: [
                {
                    value: '1',
                    label: '报工产出',
                    disabled: false
                }
            ],
            loading: false,
            partitionSort: [],
            zoneOption: []
        }
    },
    mounted() {
        this.loading = true
        this.getZoneOption({ id: Number(this.$route.query.data) })
        this.getSopDetail({ id: Number(this.$route.query.data) })
        this.dragDrop()
    },
    methods: {
        // 接口===========================
        // sop详情
        getSopDetail(data) {
            sopDetail(data).then(res => {
                this.loading = false
                if(res.code == 200) {
                    for(let key in this.createForm) {
                        if(key == 'state') {
                            this.createForm[key] = res.data[key] + ''
                        } else if(key == 'vos' && res.data[key] == null) {
                            this.createForm[key] = []
                        } else {
                            this.createForm[key] = res.data[key]
                        }
                    }
                    this.createForm.vos.map((item, i) => {
                        this.$set(this.createForm, 'name_' + i, item.name)
                        this.partitionSort.push(i)
                    })
                }
            })
        },
        // 分区数据
        getZoneOption(data) {
            this.options = [
                {
                    value: '报工产出',
                    label: '报工产出',
                    disabled: false
                }
            ]
            zoneOption(data).then(res => {
                if(res.code ==200) {
                    if(res.data != null && res.data.length > 0) {
                        res.data.map(item => {
                            this.options.push({
                                value: item.name,
                                label: item.name,
                                disabled: false
                            })
                        })
                        this.zoneOption = res.data
                    }
                    
                }
            })
        },
        // 编辑保存
        getSopEdit(data) {
            sopEdit(data).then(res => {
                if(res.code == 200) {
                    this.$router.push('/basicData/procedure')
                    this.utils.showMsg('编辑成功', 'success')
                }
            })
        },
        //保存
        save() {
            this.$refs.createForm.validate((valid) => {
                if (valid) {
                    let data = {}
                    let arr = JSON.parse(JSON.stringify(this.createForm.vos))
                    let arr1 = []
                    for(let key in this.createForm) {
                        if(key != 'vos') {
                            if(key == 'state') {
                                data[key] = Number(this.createForm[key])
                            } else if(key.indexOf('name_') == -1) {
                                data[key] = this.createForm[key]
                            }
                        }
                    }
                    arr.map((item, i) => {
                        let children = []
                        item.name = this.createForm['name_' + i]
                        item.down.map(k => {
                            if(k.name != '') {
                                k.type = this.vosSet(k.name)
                                children.push(k)
                            }
                        })
                        item.down = children
                    })
                    this.partitionSort.map(item => {
                        if(arr && arr.length > 0) {
                            arr1.push(arr[item])
                        }
                    })
                    data.vos = arr1
                    data.id = Number(this.$route.query.data)
                    this.getSopEdit(data)
                } else {
                    return false;
                }
            });
        },
        // 添加分区
        addPartition() {
            this.createForm.vos.push(
                {
                    name: '',
                    down: []
                }
            )
            this.rules['name_' + (this.createForm.vos.length-1)] = [{
                message: '名称不能为空',
                required: true
            }]
            this.partitionSort.push(this.partitionSort.length)
        },
        // 删除分区
        delPartition(index) {
            let ind = this.partitionSort.findIndex(res => { return index == res })
            let min = this.partitionSort[ind]
            this.partitionSort.splice(ind, 1)
            this.createForm.vos.splice(index, 1)
            let arr = []
            this.partitionSort.map((item, i) => {
                if(item > min) {
                   this.partitionSort[i] = item - 1
                }
            })
            for(let key in this.createForm) {
                if(key.indexOf('name_') != -1) {
                    arr.push(this.createForm[key])
                }
            }
            arr.splice(index, 1)
            this.createForm = this.handleCreateForm(this.createForm, 'name_')
            this.rules = this.handleCreateForm(this.rules, 'name_')
            arr.map((item, i) => {
                this.createForm['name_' + i] = item
            })
        },
        // 添加一行
        addLine(data, i) {
            this.createForm.vos[i].down.push({
                name: ''
            })
        },
        // 删除行
        delLine(i, j) {
            this.createForm.vos[i].down.splice(j, 1)
        },
        // createForm处理
        handleCreateForm(obj, val) {
            for(let key in obj) {
                if(key.indexOf(val) != -1) {
                    delete obj[key]
                }
            }
            return obj
        },
        // 分区内下拉处理
        optionSet() {
            let arr = []
            this.createForm.vos.map(item => {
                item.down.map(k => {
                    arr.push(k.name)
                })
            })
            arr = Array.from(new Set(arr))
            this.options.map(item => {
                let dd = arr.find(res => { return res == item.value })
                if(dd != undefined) {
                    item.disabled = true
                } else {
                    item.disabled = false
                }
            })
        },
        // 拖拽
        dragDrop() {
            const _this = this
            let el = document.getElementById('partition')
            Sortable.create(el, {
                animation: 150,
                onEnd({
                    newIndex,
                    oldIndex
                }) {
                    const currRow = _this.partitionSort.splice(oldIndex, 1)[0]
                    _this.partitionSort.splice(newIndex, 0, currRow)
                }
            })
        },
        // 分区排序
        sortHandle(n, type) {
            let el = document.getElementById('partition')
            let ind = this.partitionSort.findIndex(res => { return res == n })
            let currRow = null
            if(type == 'up' && ind != 0) {
                currRow = this.partitionSort.splice(ind, 1)[0]
                this.partitionSort.splice(ind-1, 0, currRow)
            } else if(type == 'down' && ind != this.partitionSort.length - 1) {
                currRow = this.partitionSort.splice(ind, 1)[0]
                this.partitionSort.splice(ind+1, 0, currRow)
            }
            var sortable = Sortable.create(el)
            sortable.sort(this.partitionSort)
        },
        vosSet(t) {
            if(t != '报工产出') {
                let obj = this.zoneOption.find(k => { return t == k.name })
                t = obj.type
            }
            // t = obj.type
            let s = ''
            if(t == '文本') {
                s = 'ipt'
            } else if(t == '数字') {
                s = 'inputNumber'
            } else if(t == '时间') {
                s = 'datePicker'
            } else if(t == '报工产出') {
                s = 'produce'
            } else {
                s = 'picture'
            }
            return s
        }
    },
    watch: {
        'createForm.vos': {
            handler() {
                this.optionSet()
            },
            deep: true
        }
    }
}
</script>

<style lang="less" scoped>
    .SOPTemplate {
        overflow: auto;
        .formArea {
            width: 420px;
            padding: 40px 0px 0px 7px;
            .fqBox {
                width: 600px;
                height: 134px;
                border: 1px solid #e5e5e5;
                border-radius: 2px;
                padding: 16px 180px 8px 0;
            }
            #partition {
                width: 720px;
            }
            .partitionHandle {
                position: absolute;
                top: 2px;
                right: 5px;
                display: flex;
                align-items: center;
                > span {
                    display: flex;
                    color: rgb(2, 185, 128);
                    cursor: pointer;
                }
                .sort {
                    flex-wrap: wrap;
                    width: 15px;
                    margin-left: 5px;
                    span {
                        width: 9px;
                        height: 9px;
                        font-size: 10px;
                    }
                }
            }
            .partition {
                width: 600px;
                min-height: 134px;
                border: 1px solid #e5e5e5;
                border-radius: 2px;
                padding: 16px 180px 8px 0;
                position: relative;
                .del {
                    position: absolute;
                    top: 0;
                    right: -32px;
                    color: red !important;
                }
                .addName {
                    color: #02b980;
                }
            }
            .addPartition {
                border: 1px dotted #02b980;
                color: #02b980;
                width: 600px;
                height: 28px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
        }

        .productTask {
            margin: 60px 40px 0px;

            .operate {
                span {
                    font-size: 12px;
                    float: left;
                }

                .operate_btn {
                    float: right;
                }

                margin-bottom: 10px;
            }

            .btn {
                margin: 26px 0;
                text-align: center;

                /deep/ .el-button--primary span {
                    margin-left: 0;
                }
            }
        }

        .btn {
            margin: 0 0 0 60px;
            text-align: center;
            display: inline-block;
            width: 420px;

            /deep/ .is-plain {
                margin-right: 10px;
            }

            /deep/ .el-button--primary {
                width: 130px;
                span {
                    margin-left: 0;
                }
            }
        }

        /deep/ .el-input-number--mini {
            width: 100%;
        }

        /deep/ .el-autocomplete {
            width: 100%;
        }

        /deep/ .el-range-editor--mini.el-input__inner {
            width: 100%;
        }

        /deep/ .el-table__empty-text {
            .el-empty {
                padding: 0;
            }
        }

        /deep/ .el-empty__image {
            height: 60px;
        }

        /deep/ .el-empty__image svg {
            vertical-align: text-top;
        }

        /deep/ .el-empty__description {
            margin-top: 10px;
        }

        /deep/ .el-range-editor.el-input__inner {
            width: 100%;
        }

        /deep/ .el-range-editor .el-range-input {
            flex: 7;
        }

        /deep/ .el-date-editor .el-range-separator {
            flex: 1;
        }

        /deep/ .el-input-group__append {
            background-color: #02b980;
            color: white;
        }
        /deep/ .el-input__inner {
            text-align: left;
        }
        /deep/ .el-select {
            width: 100%;
        }
        /deep/ .el-button--mini {
            padding: 0;
            font-size: 16px;
            border-radius: 3px;
            margin-right: 5px;
            border: none;
            color: #02b980;
        }
    }
</style>